<template>
  <view class="detail">
    <view class="detail-card">
      <view class="detail-banner">
        <image v-bind:src="detailData.image" mode="widthFix" />
      </view>
      <view class="info">
        <view class="info-1">
          <view class="title">
            <text>{{ detailData.title }}</text>
          </view>
          <view class="section">
            <text class="section-title">主办单位:</text>
            <text class="item">{{ detailData.organizer }}</text>
          </view>
          <view class="section">
            <text class="section-title">活动时间:</text>
            <text class="item">{{ detailData.time.start }} 至 {{ detailData.time.end }}</text>
          </view>
          <view class="section">
            <text class="section-title">参加规模:</text>
            <text class="item"
              >男: {{ detailData.participants.male }} 女: {{ detailData.participants.female }}</text
            >
          </view>
          <view class="section">
            <text class="section-title">活动地址:</text>
            <text class="item">{{ detailData.location }}</text>
          </view>
          <view class="section">
            <text class="section-title">参加单位:</text>
            <text class="item"></text>
          </view>
        </view>
        <view class="section-rule">
          <view class="title">
            <text>活动详情及规则</text>
          </view>
          <view v-for="(item, idx) in detailData.schedule" :key="idx" class="item-rule">
            <text>{{ item.time }} - {{ item.event }}</text>
          </view>
        </view>
        <view class="button-section">
          <button class="register-button">报名参加</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { DetailItem } from '@/types/index/home'

const detailData = ref<DetailItem>({
  title: '星辰大海 情定北方 一路有你 青年联谊活动',
  image: '/static/images/detail_icon.png',
  organizer: '中国北方工业有限公司、北京大学第三医院,中国航天科技集团第一研究院第一设计部',
  participants: {
    male: 45,
    female: 45,
  },
  time: {
    start: '2024-06-22 13:00:00',
    end: '2024-06-22 16:30:00',
  },
  location: '北京市西城区******',
  schedule: [
    { time: '13:00-13:30', event: '签到' },
    { time: '13:30-13:40', event: '主持人开场' },
    { time: '13:40-16:00', event: '互动游戏' },
    { time: '16:00-16:30', event: '飞鸽传书&情投意合' },
  ],
})
</script>

<style scoped>
.detail {
  background: #f9f9ff;
}

.info-1 {
  margin-top: 1rem;
  padding: 0.35rem;
  background-color: white;
  border-radius: 1%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title text {
  font-size: 1.2rem;
  font-weight: bold;
}

.section {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: 1rem;
  font-weight: bold;
  margin-right: 0.5rem;
}

.item {
  flex-grow: 1;
}

.section-rule {
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: white;
  border-radius: 1%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.item-rule {
  margin-bottom: 0.5rem;
}

.button-section {
  text-align: center;
  margin-top: 2rem;
}

.register-button {
  background: #0f84d8;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-button:hover {
  background-color: #0056b3;
}
</style>
